<template>
	<view class="">
		<view class="" :style="{'height': tabHeight+'px','width': '100vw'}"></view>
	</view>
	<view class="tabbar-container">
		<view class="tabbar-items animated fadeIn">
			<view class="tabbar-item" v-for="(item, index) in tabbarList" :key="item.id"
				:class="[item.centerItem ? ' center-item' : '']" @click="changeItem(item)">
				<view class="item-top">
					<image :src="currentItem == item.id ? item.selectIcon : item.icon" mode="widthFix"></image>
				</view>
				<view class="item-bottom" :style="{'color':currentItem == item.id ? 'var(--color)' : '' }">
					<text>{{ item.text }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed,
		useAttrs
	} from 'vue'
	
	const props = defineProps({
		tabHeight:{
			default:100,
			type:Number
		}
	})
	
	onMounted(() => {
		uni.hideTabBar({
			success: (res) => {
				console.log(res, '成功')
			},
			fail: (res) => {
				console.log(res, '失败')
			},
		})
		// 获取当前tab列表
		// uni.getTabBar().then(tabBar => {
		// 	console.log(tabBar, 'tabBar')
		// 	tabbarList.value.forEach((item, index) => {
		// 		item.path = tabBar.list[index].pagePath
		// 	})
		// 	// 可能还需要设置selected等  
		// });

		let pages = getCurrentPages()
		currentPath.value = '/' + pages[pages.length - 1].route
		currentItem.value = tabbarList.value.find((e) => e.path == currentPath.value)?.id ?? 0


	})

	const currentItem = ref(0)
	const currentPath = ref('')
	const tabbarList = ref([{
			id: 0,
			path: '/pages/tabbar/member',
			icon: '/static/icon/tabbar/member-select.png',
			selectIcon: '/static/icon/tabbar/member-select.png',
			text: '会员中心',
			centerItem: false,
		},
		{
			id: 1,
			path: '/pages/tabbar/service',
			icon: '/static/icon/tabbar/service.png',
			selectIcon: '/static/icon/tabbar/service-select.png',
			text: '服务提醒',
			centerItem: false,
		},
		{
			id: 2,
			path: '/pages/tabbar/shop',
			icon: '/static/icon/tabbar/shop.png',
			selectIcon: '/static/icon/tabbar/shop-select.png',
			text: '会员商城',
			centerItem: false,
		},
		{
			id: 3,
			path: '/pages/tabbar/news',
			icon: '/static/icon/tabbar/news.png',
			selectIcon: '/static/icon/tabbar/news-select.png',
			text: '消息通知',
			centerItem: false,
		},
		{
			id: 4,
			path: '/pages/tabbar/me',
			icon: '/static/icon/tabbar/me.png',
			selectIcon: '/static/icon/tabbar/me-select.png',
			text: '个人中心',
			centerItem: false,
		},
	])

	const changeItem = (item) => {
		uni.switchTab({
			url: item.path
		})
	}
</script>

<style lang="scss" scoped>
	$theme-color: '';

	view {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	.tabbar-container {
		width: 100vw;
		height: 60px;
		position: fixed;
		bottom: 40rpx;
		left: 0;
		z-index: 999;
		display: flex;
		justify-content: center;

		.tabbar-items {
			max-width: 92vw;
			min-width: 50vw;
			padding: 18rpx 3vw;
			box-sizing: border-box;
			z-index: 999;
			box-shadow: 0px 0px 50rpx 0px var(--shadow);
			display: flex;
			justify-content: center;
			align-items: center;
			color: #999999;
			background-color: rgba(255, 255, 255, 0.9);
			filter: brightness(1); /* 提升亮度 */
			backdrop-filter: blur(8rpx);
			border-radius: 150rpx;
		}


		.tabbar-item {
			flex: 1;
			min-width: 17vw;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;

			.item-top {
				width: 62rpx;
				height: 62rpx;
				padding: 10rpx 10rpx 0 10rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.item-bottom {
				margin: auto 0 0 0;
				font-size: 22rpx;
				width: 100%;
				white-space: nowrap;
			}
		}
	}

	.tabbar-container .center-item {
		position: relative;

		.item-top {
			height: 100rpx;
			width: 100rpx;
			position: absolute;
			top: -30rpx;
			left: 50%;
			transform: translateX(-50%);
			box-shadow: 2rpx 2rpx 12rpx var(--gray-9);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: white;
		}

	}
</style>